<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>WK科技</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <meta name="description" content="致力于打造最大的芯片平台" />
    <meta name="keywords" content="芯片，半导体，集成电路" />
    <link rel="stylesheet" href="./iconfont/iconfont.css" />
    <link rel="stylesheet" href="./luojie.css/第二个页面.css">
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.2.0/axios.min.js"></script>

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        i,
        em {
            font-style: normal;
        }

        ul,
        li {
            list-style: none;
        }

        body {
            background-color: #dadbf8;
        }

        .main {
            display: flex;
            position: absolute;
            top: 16px;
            left: 15px;
            width: 97vw;
            height: 95vh;
            background-color: #fafafc;
            border-radius: 20px;
            overflow: hidden;
        }

        .tab {
            height: 100%;
            width: 15vw;
            background-color: #fafafc;
        }

        .right {
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        .header {
            width: 100%;
            height: 7vh;
            line-height: 7vh;
            background-color: #fafafc;
            border-bottom: 1px solid #fff;
        }

        .header i {
            font-size: 1.6vw;
            margin-left: 1.1vw;
            cursor: pointer;
        }

        .header i:nth-child(2) {
            margin-left: 70vw;
        }

        .big-content {
            position: relative;
            overflow: auto;
            display: flex;
            flex: 1;
            width: 100%;
            background-color: #f2f2f8;
        }

        .content {
            flex: 1;
        }

        .scroll {
            height: 100%;
            width: 1.1vw;
            background-color: #fafafc;
        }

        .logo {
            padding: 10px;
            height: 60px;
            line-height: 60px;
            margin-bottom: 20px;
            border-bottom: 1px solid #fff;
        }

        .out {
            width: 60px;
            height: 60px;
            line-height: 60px;
            overflow: hidden;
            border-radius: 50%;
        }

        .out img {
            width: 107%;
            height: 107%;
            margin-left: -2px;
            margin-top: -2px;
        }

        .chuangjian {
            position: relative;
            width: 90%;
            height: 50px;
            line-height: 50px;
            background-color: #6466e2;
            padding: 0;
            text-align: center;
            color: #fff;
            margin-bottom: 5px;
            border-radius: 10px;
            margin-left: 10px;
            cursor: pointer;
        }

        .box1 {
            display: none;
            position: absolute;
            top: 0;
            right: -130px;
            width: 130px;
            height: 170px;
            padding: 2px 5px 0;
            border-radius: 5px;
            background-color: #fff;
        }

        .box1 em {
            height: 29%;
            width: 100%;
            display: block;
            color: #fff;
            font-size: 14px;
            background-color: #9d9ee6;
        }

        .box1 i {
            display: block;
            font-size: 13px;
            margin-top: -13px;
            height: 5%;
            color: black;
        }

        .chuangjian:hover .box1 {
            z-index: 9;
            display: block;
        }

        .box1 em:hover {
            background-color: #5355c7;
        }

        .tab ul {
            width: 100%;
            height: 100%;
            padding: 10px;
        }

        .tab li {
            position: relative;
            width: 100%;
            height: 50px;
            line-height: 50px;
            margin-bottom: 3px;
            border-radius: 10px;
            padding-left: 20px;
            cursor: pointer;
            font-size: 1.1vw;
            overflow: hidden;
        }

        .tab li div {
            width: 100%;
            height: 4vh;
            line-height: 4vh;
            font-size: 14px;
            margin-left: -0.8vw;
            margin-bottom: 4px;
            border-radius: 10px;
            padding-left: 1.7vw;
            background-color: #5355c7;
        }

        .tab li:hover {
            color: #fff;
            background-color: #5355c7;
        }

        .tab li i {
            margin-right: 0.9vh;
        }

        .xialakuang,
        .xialakuang2,
        .xialakuang3,
        .xialakuang4,
        .xialakuang5 {
            display: block;
            height: 2.7vw;
            font-size: 1vw;
            padding-left: 4vw;
            border-radius: 5px;
            width: 70%;
            cursor: pointer;
            color: #6466e2;
        }

        .xialakuang:hover,
        .xialakuang2:hover,
        .xialakuang3:hover,
        .xialakuang4:hover,
        .xialakuang5:hover {
            color: #16186d;
        }

        .color {
            background-color: #5355c7;
            color: #fff;
        }
    </style>
</head>

<body>
    <!-- 点击我创建的出现模态框
 -->
    <div class="modal  fade" id="ds">
        <div class="modal-dialog">
            <div class="modal-content" style=" background-color: #b6adc9; ">
                <div class="modal-header">
                    <h5 class="modal-title"></h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form action="">
                        <div class="mb-3">
                            <label for="Book-Name" class="form-label name">项目名字</label>
                            <input class="form-control" type="text" id="avatar" placeholder="请输入项目名字" name="name">
                        </div>
                        <div class="mb-3">
                            <label for="Book-Name" class="form-label name">项目描述</label>
                            <input class="form-control" type="text" id="avatar" placeholder="请输入项目描述" name="miaoshu">
                        </div>
                        <div class="mb-3">
                            <label for="author" class="form-label password">项目组长</label>
                            <input class="form-control" type="text" id="description" placeholder=" 请输入项目组长"
                                name="zuzhang">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">

                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"
                        style="   background-color: #b6adc9;   border-radius: 20px;  border: 2px solid #b6adc9; ">取消</button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" id="submit"
                        style="   background-color: #b6adc9;   border-radius: 20px;  border: 2px solid #b6adc9; ">保存</button>

                </div>

            </div>
        </div>
    </div>









    <div class="main">
        <!--左边导航栏 -->
        <div class="tab">
            <div class="logo">
                <div class="out">
                    <img src="./images/logo4.png" alt="" />
                </div>
            </div>
            <div class="chuangjian">
                创建项目
                <i class="iconfont icon-jia"></i>
            </div>
            <div class="gainian1 xialakuang4 la" style="display: none">
                项目概念
            </div>
            <div class="renwu1 xialakuang4 la" style="display: none">任务列表</div>
            <div class="chuangjian1 xialakuang4 la" style="display: none">
                创建任务
            </div>
            <ul>
                <li class="pan"><i class="iconfont icon-yibiaopan"></i>仪表盘</li>
                <li class="item">
                    <i class="iconfont icon-shuxie"></i>
                    我的项目
                    <i class="xiala xialaone iconfont icon-jiantou_liebiaozhankai"></i>
                </li>
                <div class="yy_liebiao xialakuang kapian la" style="display: none">
                    项目
                  </div>
                <div class="liebiao xialakuang kapian la" style="display: none">
                    列表显示
                </div>
                <div class="renwu2 xialakuang la" style="display: none">任务管理</div>
                <div class="wenjian2 xialakuang la" style="display: none">
                    文件管理
                </div>
                <div class="gainian2 xialakuang la" style="display: none">
                    概念动态
                </div>
                <div class="tongji xialakuang la" style="display: none">统计</div>
                <li class="renwu">
                    <i class="iconfont icon-renwu"></i>我的任务
                    <i class="xiala xialaone iconfont icon-jiantou_liebiaozhankai"></i>
                </li>
                <div class="yy_renwu xialakuang5 la" style="display: none">
                    任务
                  </div>
                <div class="bianji xialakuang5 la" style="display: none">
                    编辑任务
                </div>
                <li class="baobiao">
                    <i class="iconfont icon-baobiao"></i>报表管理
                    <i class="xiala iconfont icon-jiantou_liebiaozhankai"></i>
                </li>
          <div class="yy_baobiao xialakuang2 la" style="display: none">报表</div>

                <div class="fenbu xialakuang2 la" style="display: none">任务分布</div>
                <div class="jinzhan xialakuang2 la" style="display: none">
                    任务进展
                </div>
                <li class="xitong">
                    <i class="iconfont icon-xitongshezhi"></i>系统设置
                    <i class="xiala iconfont icon-jiantou_liebiaozhankai"></i>
                </li>
                <div class="xiaoxi xialakuang3 la" style="display: none">
                    消息管理
                </div>
                <div class="rizhi xialakuang3 la" style="display: none">日志管理</div>
            </ul>
        </div>
        <!-- 右边大版块-->
        <div class="right">
            <div class="header">
                <i class="iconfont icon-liebiao2"></i>
                <i class="iconfont icon-Magnifier"></i>
                <i class="iconfont icon-xiaoxi"></i>
            </div>
            <div class="big-content">
                <!--------------------内容写在这里---- -->
                <div class="content">
                    <ul class="head">
                        <li style="background-color:#0ac61d ;">
                            <span>项目总数</span>
                            <span> 30</span>
                        </li>
                        <li style="background-color:#ddbf11;">
                            <span>进行中</span>
                            <span> 10</span>
                        </li>
                        <li style="background-color:#87ceeb;">
                            <span>已延期</span>
                            <span> 5</span>
                        </li>
                        <li style="background-color:#b946bd;">
                            <span>项目完成率</span>
                            <span> 70%</span>
                        </li>

                    </ul>
                    <div class="bai">
                        <div class="middle">
                            <h3>我的项目</h3>
                            <ul class="middle_middle">
                                <li class="purple">全部</li>
                                <li data-bs-toggle="modal" data-bs-target="#ds" id="chuang">我创建的</li>
                                <li>我参与的</li>
                            </ul>
                            <input class="query" type="text" placeholder="输入查询项">
                            <span class="iconfont icon-Magnifier" id="search"></span>
                            <div class="List_display">
                                列表显示
                            </div>
                        </div>
                        <div class="footer">
                            <div class="ha">
                                <span class="iconfont icon-gongsi" id="tu"></span>
                                <div class="one">
                                    <span>项目1</span>
                                    <span>项目描述</span>
                                </div>
                                <div class="two">
                                    <span>项目组长</span>
                                    <span>李微微</span>
                                </div>
                                <div class="three">
                                    <span> 创建时间</span>
                                    <span>2022-07-11</span>
                                </div>
                                <div class="four">
                                    <div class="nei"></div>
                                </div>

                                <button type="button" class="btn btn-primary"
                                    style="background-color: #9d9ee6;border: 1px solid #9d9ee6 ;" id="xiugai"
                                    data-bs-toggle="modal" data-bs-target="#ds">编辑</button>





                                <button type="button" class="btn btn-secondary" id="del" style="background-color: #989898;">删除</button>

                            </div>


                        </div>
                        <div class="fenye">
                            <select class="form-select" aria-label="Default select example" id="all">
                                <option value="1">第一页</option>
                                <option value="2">第二页</option>
                                <option value="3">第三页</option>
                            </select>
                            <div class="container mt-3">

                                <ul class="pagination">
                                    <li class="page-item"><a class="page-link shang" href="#">上一页</a>
                                    </li>
                                    <li class="page-item"><a class="page-link" data-id="1" href="#">1</a>
                                    </li>
                                    <li class="page-item"><a class="page-link" data-id="2" href="#">2</a>
                                    </li>
                                    <li class="page-item"><a data-id="3" class="page-link" href="#">3</a>
                                    </li>
                                    <li class="page-item"><a class="page-link xia" href="#">下一页</a>
                                    </li>
                                </ul>
                            </div>
                        </div>


                    </div>
                </div>








                <!------------------------------------->
                <div class="scroll"></div>
            </div>
        </div>
    </div>
    <!-- ----------------------------------script------------------------------------------>
    <script>
        const li = document.querySelectorAll(".tab li")
        li.forEach((el) => {
            el.addEventListener("click", function (e) {
                console.log(el)
                if (e.target.tagName !== "LI") return
                const old = document.querySelector(".color") // 有特殊样式的元素
                old && old.classList.remove("color") //没有就不清除,有就清除
                e.target.classList.add("color")
            })
        })
        const la = document.querySelectorAll(".la")
        //创建项目下拉框
        let flag4 = true
        const chuangjian = document.querySelector(".chuangjian")
        const xialakuang4 = document.querySelectorAll(".xialakuang4")
        chuangjian.onclick = function (e) {
            la.forEach((el) => {
                el.style.display = "none"
            })
            if (flag4) {
                xialakuang4.forEach((el) => {
                    el.style.display = "block"
                })
                flag4 = false
            } else {
                xialakuang4.forEach((el) => {
                    el.style.display = "none"
                })
                flag4 = true
            }
        }
        //项目下拉框
        let flag = true
        const item = document.querySelector(".item")
        const xialakuang = document.querySelectorAll(".xialakuang")
        item.onclick = function (e) {
            la.forEach((el) => {
                el.style.display = "none"
            })
            if (flag) {
                xialakuang.forEach((el) => {
                    el.style.display = "block"
                })
                flag = false
            } else {
                xialakuang.forEach((el) => {
                    el.style.display = "none"
                })
                flag = true
            }
        }
        // 我的任务
        let flag5 = true
        const renwu = document.querySelector(".renwu")
        const xialakuang5 = document.querySelectorAll(".xialakuang5")
        renwu.onclick = function (e) {
            la.forEach((el) => {
                el.style.display = "none"
            })
            if (flag5) {
                xialakuang5.forEach((el) => {
                    el.style.display = "block"
                })
                flag5 = false
            } else {
                xialakuang5.forEach((el) => {
                    el.style.display = "none"
                })
                flag5 = true
            }
        }
        //报表下拉框
        let flag2 = true
        const baobiao = document.querySelector(".baobiao")
        const xialakuang2 = document.querySelectorAll(".xialakuang2")
        baobiao.onclick = function (e) {
            la.forEach((el) => {
                el.style.display = "none"
            })
            if (flag2) {
                xialakuang2.forEach((el) => {
                    el.style.display = "block"
                })
                flag2 = false
            } else {
                xialakuang2.forEach((el) => {
                    el.style.display = "none"
                })
                flag2 = true
            }
        }
        //   系统管理下拉框
        let flag3 = true
        const xitong = document.querySelector(".xitong")
        const xialakuang3 = document.querySelectorAll(".xialakuang3")
        xitong.onclick = function (e) {
            la.forEach((el) => {
                el.style.display = "none"
            })
            if (flag3) {
                xialakuang3.forEach((el) => {
                    el.style.display = "block"
                })
                flag3 = false
            } else {
                xialakuang3.forEach((el) => {
                    el.style.display = "none"
                })
                flag3 = true
            }
        }
        // 大排它，点击某个导航栏，其他导航栏都收起
    </script>
    <script src="./luojie.js/第二个页面的.js"></script>
    <script src="./dianji.js"></script>

</body>

</html>